<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="tooltip">
        <title>Configuration, methods and events of Kendo UI Tooltip</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/ui/tooltip.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/ui/tooltip.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendouitooltip"><a href="#kendouitooltip">kendo.ui.Tooltip</a></h1>

<p>Represents the Kendo UI Tooltip. Inherits from <a href="/api/javascript/ui/widget">Widget</a>.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-autoHide">
<a href="#configuration-autoHide">autoHide </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: true)</em>
</h3>

<p>Specifies if the Tooltip will be hidden when mouse leaves the target element. If set to false a close button will be shown within Tooltip. If set to false, showAfter is specified and the showOn is set to "mouseenter" the Tooltip will be displayed after the given timeout even if the element is no longer hovered.</p>

<h4>Example - prevent the Tooltip from closing automatically</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
    Some Content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        autoHide: false
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation">
<a href="#configuration-animation">animation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>A collection of {Animation} objects, used to change default animations. A value of <code>false</code> will disable all animations in the widget.</p>

<p><code>animation:true</code> is not a valid configuration.</p>

<h4>Example - disable animations</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
    Some Content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        animation: false
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close">
<a href="#configuration-animation.close">animation.close </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The animation that will be used when a Tooltip closes.</p>

<h4>Example - set close animation</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
    Some Content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        animation: {
          close: {
            effects: "fade:out"
          }
        }
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close.effects">
<a href="#configuration-animation.close.effects">animation.close.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Effect to be used for closing of the Tooltip.</p>

<h4>Example - set close animation effect</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
    Some Content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        animation: {
          close: {
            effects: "fade:out"
          }
        }
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.close.duration">
<a href="#configuration-animation.close.duration">animation.close.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>Defines the animation duration.</p>

<h4>Example - set close animation duration</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
    Some Content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        animation: {
          close: {
            duration: 1000
          }
        }
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.open">
<a href="#configuration-animation.open">animation.open </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The animation that will be used when a Tooltip opens.</p>

<h4>Example - set open animation</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
    Some Content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        animation: {
          open: {
            effects: "fade:in",
            duration: 1000
          }
        }
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.open.effects">
<a href="#configuration-animation.open.effects">animation.open.effects </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Effect to be used for opening of the Tooltip.</p>

<h4>Example - set open animation effect</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
    Some Content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        animation: {
          open: {
            effects: "fade:in"
          }
        }
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-animation.open.duration">
<a href="#configuration-animation.open.duration">animation.open.duration </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>Defines the animation duration.</p>

<h4>Example - set open animation duration</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
    Some Content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        animation: {
          open: {
            duration: "1000"
          }
        }
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-content">
<a href="#configuration-content">content </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The text or a function which result will be shown within the Tooltip.
By default the Tooltip will display the target element title attribute content.</p>

<p>If you need to retrieve the <code>title</code> attribute of the target from inside the <code>content</code> function, then use <code>target.data("title")</code>, as shown below.</p>

<blockquote>
<p>If the content passed to the Tooltip includes scripts, they will be executed. If this is not desired, make sure to strip any undesired content in advance.</p>
</blockquote>

<h4>Example - extract the content from target element content</h4>

<pre><code>&lt;div id="container"&gt;
    &lt;span title="foo"&gt;Some content&lt;/span&gt;
    &lt;span title="bar"&gt;Some more content&lt;/span&gt;
&lt;/div&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#container").kendoTooltip({
        filter: "span",
        content: function(e) {
          var target = e.target; // the element for which the tooltip is shown
          return target.data("title") + " " + target.text(); // set the element text as content of the tooltip
        }
      });
    });
&lt;/script&gt;
</code></pre>

<h4>Example - content as static text</h4>

<pre><code>&lt;span id="target"&gt;
    Some content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        content: "Tooltip content!"
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-content.url">
<a href="#configuration-content.url">content.url </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Specifies a URL or request options that the Tooltip should load its content from.</p>

<blockquote>
<p>Note: For URLs starting with a protocol (e.g. http://),
a container iframe element is automatically created. This behavior may change in future
versions, so it is advisable to always use the <a href="#iframe">iframe configuration option</a>.</p>
</blockquote>

<h4>Example - load content from remote URL</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      content: {
        url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
      },
      width: 220,
      height: 280
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-callout">
<a href="#configuration-callout">callout </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default:true)</em>
</h3>

<p>Specifies if the Tooltip callout will be displayed.</p>

<h4>Example - hide the Tooltip callout</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
    Some content
&lt;/span&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#target").kendoTooltip({
        callout: false
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-filter">
<a href="#configuration-filter">filter </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Specifies a selector for elements, within the container, for which the Tooltip will be displayed.</p>

<h4>Example - show Tooltip only for strong elements in a text</h4>

<pre><code>&lt;div id="container"&gt;
    I'm a &lt;strong title="First target"&gt;tooltip target&lt;/strong&gt;. I'm also a
    &lt;strong title="Second target"&gt;tooltip target&lt;/strong&gt;.
&lt;/div&gt;

&lt;script&gt;
    $(document).ready(function() {
      $("#container").kendoTooltip({
        filter: "strong"
      });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-iframe">
<a href="#configuration-iframe">iframe </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Explicitly states whether content iframe should be created.</p>

<h3 id="configuration-height">
<a href="#configuration-height">height </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: Infinity)</em>
</h3>

<p>The height (in pixels) of the Tooltip.</p>

<h4>Example - set the height of the Tooltip</h4>

<pre><code>&lt;span id="target" title="Tooltip long content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      height: 80
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-width">
<a href="#configuration-width">width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: Infinity)</em>
</h3>

<p>The width (in pixels) of the Tooltip.</p>

<h4>Example - set the width of the Tooltip</h4>

<pre><code>&lt;span id="target" title="Tooltip long content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      width: 180
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-position">
<a href="#configuration-position">position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "bottom")</em>
</h3>

<p>The position relative to the target element, at which the Tooltip will be shown. Predefined values are "bottom", "top", "left", "right", "center".</p>

<h4>Example - set Tooltip position</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      position: "right"
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-showAfter">
<a href="#configuration-showAfter">showAfter </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a><em>(default: 100)</em>
</h3>

<p>Specify the delay in milliseconds before the Tooltip is shown. This option is ignored if <code>showOn</code> is set to "click" or "focus".</p>

<h4>Example - set show delay</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      showAfter: 1000
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-showOn">
<a href="#configuration-showOn">showOn </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "mouseenter")</em>
</h3>

<p>The event on which the Tooltip will be shown. Predefined values are "mouseenter", "click" and "focus".</p>

<h4>Example - set event on which the Tooltip will be shown</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Click Me
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      showOn: "click"
    });
  });
&lt;/script&gt;
</code></pre>

<h4>Example - set multiple events on which the Tooltip will be shown</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Click Me
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      showOn: "click mouseenter"
    });
  });
&lt;/script&gt;
</code></pre>

<h2 id="fields"><a href="#fields">Fields</a></h2>

<h3 id="fields-popup">
<a href="#fields-popup">popup </a><code>kendo.ui.Popup</code>
</h3>

<p>Holds the Kendo UI <a href="/api/javascript/ui/popup"><code>Popup</code></a> instance, which manages the showing and hiding of the tooltips at the appropriate position.</p>

<p>The <code>popup</code> field can be used to apply custom CSS classes and styles, or any other attributes to the Popup's <a href="/intro/widget-basics/wrapper-element"><code>element</code> or <code>wrapper</code></a>.</p>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-show"><a href="#methods-show">show</a></h3>

<p>Shows the Tooltip for given target.</p>

<h4>Example - show Tooltip for target element</h4>

<pre><code>&lt;div id="container"&gt;
  &lt;span id="target" title="Tooltip content"&gt;Tooltip target&lt;/span&gt;
&lt;/div&gt;

&lt;script&gt;
  $(document).ready(function() {
    var tooltip = $("#container").kendoTooltip().data("kendoTooltip");
    tooltip.show($("#target"));
  });
&lt;/script&gt;
</code></pre>

<h4>Parameters</h4>

<h5>element <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The target element for which the Tooltip should be shown.</p>

<h3 id="methods-hide"><a href="#methods-hide">hide</a></h3>

<p>Hides the Tooltip.</p>

<h4>Example - manually close the Tooltip</h4>

<pre><code>&lt;div id="container"&gt;
  &lt;span title="Tooltip content"&gt;Tooltip target&lt;/span&gt;
&lt;/div&gt;

&lt;button id="hideTooltip" class="k-button"&gt;Hide tooltip&lt;/button&gt;

&lt;script&gt;
  $(document).ready(function() {
    var tooltip = $("#container").kendoTooltip({
      filter: "span",
      autoHide: false,
      position: "right"
    }).data("kendoTooltip");

    $("#hideTooltip").click(function() {
      tooltip.hide();
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="methods-refresh"><a href="#methods-refresh">refresh</a></h3>

<p>Refresh the Tooltip content.</p>

<h4>Example force refresh of the Tooltip content</h4>

<pre><code>&lt;div id="container"&gt;
  &lt;span id="target" title="Tooltip content"&gt;Tooltip target&lt;/span&gt;
&lt;/div&gt;

&lt;button id="refreshButton" class="k-button"&gt;Refresh Content&lt;/button&gt;

&lt;script&gt;
  $(document).ready(function() {
    var tooltip = $("#container").kendoTooltip({
      filter: "span",
      position: "right",
      content: function() {
        return "last time refreshed: " + kendo.format("{0:T}", new Date());
      }
    }).data("kendoTooltip");


    $("#refreshButton").click(function() {
      tooltip.refresh();
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="methods-target"><a href="#methods-target">target</a></h3>

<p>Gets the Tooltip current target.</p>

<h4>Example</h4>

<pre><code>&lt;div id="container"&gt;
  &lt;span id="target1" title="Tooltip1 content"&gt;Tooltip target1&lt;/span&gt; &lt;br /&gt;
  &lt;span id="target2" title="Tooltip2 content"&gt;Tooltip target2&lt;/span&gt;
&lt;/div&gt;

&lt;button id="targetButton" class="k-button"&gt;Log target&lt;/button&gt;

&lt;script&gt;
  $(document).ready(function() {

    var tooltip = $("#container").kendoTooltip({
      filter: "span",
      autoHide: false,
      position: "right"
    }).data("kendoTooltip");


    $("#targetButton").click(function() {
      var target = tooltip.target();
      if (target) {
        console.log(target.attr("id"));
      }
    });
  });
&lt;/script&gt;
</code></pre>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a> The target element or null.</p>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-contentLoad"><a href="#events-contentLoad">contentLoad</a></h3>

<p>Triggered when an AJAX request for content completes.</p>

<h4>Example - subscribe to the "contentLoad" event during initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      content: {
        url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
      },
      width: 220,
      height: 280,
      contentLoad: function() {
        console.log("content is loaded");
      }
    });
  });
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "contentLoad" event after initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    var tooltip = $("#target").kendoTooltip({
      content: {
        url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
      },
      width: 220,
      height: 280
    }).data("kendoTooltip");

    tooltip.bind("contentLoad", function() {
      console.log("content is loaded");
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="events-show"><a href="#events-show">show</a></h3>

<p>Triggered when a Tooltip is shown.</p>

<h4>Example - subscribe to "show" event during initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      show: function() {
        console.log("tooltip is shown");
      }
    });

  });
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to "show" event after initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    var tooltip = $("#target").kendoTooltip({
    }).data("kendoTooltip");

    tooltip.bind("show", function() {
      console.log("tooltip is shown");
    });
  });
&lt;/script&gt;
</code></pre>

<h4>Example - force refresh every time the Tooltip is shown</h4>

<pre><code>&lt;div id="container"&gt;
  &lt;span id="target" title="Tooltip content"&gt;Tooltip target&lt;/span&gt;
&lt;/div&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#container").kendoTooltip({
      filter: "span",
      position: "right",
      content: function() {
        return "last time refreshed: " + kendo.format("{0:T}", new Date());
      },
      show: function() {
        this.refresh();
      }
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="events-hide"><a href="#events-hide">hide</a></h3>

<p>Triggered when a Tooltip is hidden</p>

<h4>Example - subscribe to "hide" event during initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      hide: function() {
        console.log("tooltip is hidden!");
      }
    });

  });
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to "hide" event after initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    var tooltip = $("#target").kendoTooltip().data("kendoTooltip");

    tooltip.bind("hide", function() {
        console.log("tooltip is hidden!");
    });
  });
&lt;/script&gt;
</code></pre>

<h3 id="events-requestStart"><a href="#events-requestStart">requestStart</a></h3>

<p>Triggered before an AJAX request started. Note that this event is triggered only when an AJAX request, instead of an iframe, is used.</p>

<h4>Example - subscribe to "requestStart" event during initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      iframe: false,
      content: {
        url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
      },
      width: 220,
      height: 280,
      requestStart: function(e) {
        console.log("request is started");
      }
    });
  });
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to "requestStart" event after initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    var tooltip = $("#target").kendoTooltip({
      iframe: false,
      content: {
        url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
      },
      width: 220,
      height: 280
    }).data("kendoTooltip");

    tooltip.bind("requestStart", function(e) {
      console.log("request is started");
    });
  });
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.target <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The target element, for which the Tooltip is shown.</p>

<h5>e.options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The request options which will be set to <a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax</a> or to the iframe</p>

<h3 id="events-error"><a href="#events-error">error</a></h3>

<p>Triggered when an AJAX request for content fails.</p>

<h4>Example - subscribe to "error" event during initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#target").kendoTooltip({
      iframe: false,
      content: {
        url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
      },
      width: 220,
      height: 280,
      error: function(e) {
        console.log("error");
      }
    });
  });
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to "error" event after initialization</h4>

<pre><code>&lt;span id="target" title="Tooltip content"&gt;
  Some content
&lt;/span&gt;

&lt;script&gt;
  $(document).ready(function() {
    var tooltip = $("#target").kendoTooltip({
      iframe: false,
      content: {
        url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
      },
      width: 220,
      height: 280
    }).data("kendoTooltip");

    tooltip.bind("error", function(e) {
      console.log("error");
    });
  });
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.xhr <code>jqXHR</code>
</h5>

<p>The XHR request object, as returned from <a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax</a></p>

<h5>e.status <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The status of the request, as returned from <a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax</a></p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

